<script setup>
import { reactive } from 'vue';
import NavBar from '../../components/nav-bar'

// 手机状态栏的高度
const { statusBarHeight } = uni.getSystemInfoSync()
const loginData = reactive({
	data:{
		username:'',
		password:''
	}
})
const login = function(){
    uni.request({
    	url: 'https://tp6.recer.starsky.fun/api/Home/Public/login', 
        data: loginData.data,
		method:'POST',
		header:{
		    'content-type':'application/x-www-form-urlencoded; charset=UTF-8'//重点
		},
	    success: (res) => {
			// console.log(res.data)
            if(res.data.msg.includes("请输入登录账户和密码")){
				uni.showToast({
					title: '请输入登录账户和密码',
					icon:'none',
					duration: 2000
				});
			}else if(res.data.msg.includes("登录失败，用户名或密码错误！")){
				uni.showToast({
					title: '登录失败，用户名或密码错误！',
					icon:'none',
					duration: 2000
				});
			}else{
        uni.showToast({
        	title: '登录成功',
        	icon:'none',
        	duration: 2000
        });
				uni.setStorageSync('mid',res.data.data.mid)
				uni.setStorageSync('token', res.data.data.token)
				setTimeout(gotoclear,2000)
			}
		}
	})
}
//登录成功清除和跳转
function gotoclear(){
  uni.switchTab({ url: '/pages/home/home' })
  loginData.data.username='',
  loginData.data.password=''
}
// 登录
function submit() {
	login();
}
const goRegister = () =>{
	uni.navigateTo({ url: '/pages/login/register' })
}
const goforgot = () =>{
	uni.navigateTo({ url: '/pages/login/forgot' })
}
</script>

<template>
  <view class="login-content">
    <view class="statusBarHeight"  :style="{ height: statusBarHeight * 2 + 'rpx' }"></view>
    <nav-bar title="登录" />
    <view class="logo-box" >
      <image
        src="http://recommender.starsky.fun/tpl/Public/xsm/img/logob.png"
        class="logo-img"
        mode="scaleToFill"

      />
    </view>
    <view class="submit-box">
      <view class="login-input">
        <image
          src="http://recommender.starsky.fun/tpl/Public/xsm/img/login_phone.png"
          class="input-img"
          mode="scaleToFill"
        />
        <input v-model="loginData.data.username" type="text" class="input-content" placeholder="请输入登录账户/手机/邮箱">
      </view>
      <view class="login-input">
        <image
          src="http://recommender.starsky.fun/tpl/Public/xsm/img/login_password.png"
          class="input-img"
          mode="scaleToFill"
        />
        <input v-model="loginData.data.password" type="password" class="input-content" placeholder="请输入登录密码">
      </view>
    </view>
    <view class="login-regbox">
      <text @click="goforgot">忘记密码</text>
      <text @click="goRegister">注册账号</text>
    </view>
    <view class="login-btn">
      <button class="submit" @click="submit">登录</button>
    </view>
    <view class="login-bottom">
      <image
        src="http://recommender.starsky.fun/tpl/Public/xsm/img/check_box_checked.png"
        class="agree-icon"
        mode="scaleToFill"
      />
      登录即代表您同意
      <text class="text">《种草客用户协议和隐私政策》</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-content {
  height: 100vh;
  
  .statusBarHeight {
    background-color: #faca2a;
  }

  .logo-box {
    width: 160rpx;
    height: 160rpx;
    margin: 128rpx auto;

    .logo-img {
      width: 160rpx;
      height: 160rpx;
    }
  }

  .submit-box {
    .login-input {
      position: relative;
      height: 88rpx;
      margin: 0 45rpx 32rpx;
      background-color: #ededed;
      border-radius: 44rpx;

      .input-img {
        position: absolute;
        top: 50%;
        left: 16rpx;
        transform: translate(0, -50%);
        width: 76rpx;
        height: 76rpx;
      }

      .input-content {
        height: 100%;
        padding-left: 96rpx;
        font-size: 27rpx;
      }
    }
  }

  .login-regbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64rpx;
    margin: 0 67rpx;
    font-size: 28rpx;
    color: #999;
  }

  .login-btn {
    margin: 16rpx 45rpx 0;

    .submit {
      height: 100rpx;
      background-color: #faca2a;
      border-radius: 50rpx;
      font-size: 32rpx;
      line-height: 100rpx;
    }
  }

  .login-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80rpx;
    font-size: 24rpx;
    color: #a1a1a1;

    .agree-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }

    .text {
      color: #576b93;
    }
  }
}
</style>